<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">

    <!--<script th:src="@{static/js/vue.js}"></script>-->
    <script th:src="@{static/js/elementUI.js}"></script>
    <!--<script th:src="@{static/js/axios.js}"></script>-->
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <!-- import JavaScript -->
    <script th:src="@{static/js/index.js}"></script>
    <link rel="stylesheet" th:href="@{static/css/elementUI.css}">
    <style>
        /**/
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 5px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
        #main{
            width: 80%;
            margin: auto;
            margin-top: 10px;
        }
        #dataTable{
            margin-top: 10px;
        }
        #form{
            line-height: 60px;
        }
        #top{
            /*height: 100px;*/
            /*overflow: hidden;*/
        }
        div{
            /*border: 1px red solid;*/
        }
    </style>
</head>

<body>
<div id="top">
    <el-card class="box-card" style="background-color: #EBEEF5">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">邮件消息</span>
        <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
    </el-card>
</div>
<div id="main">
    <div id="form">
        <el-card class="box-card">
            <div slot="header" class="clearfix" style="height: 20px;line-height: 20px">
                <span style="font-size: 15px">筛选查询</span>
                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div align="left">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="消息标题" style="margin-left: 20px">
                        <el-input v-model="formInline.msgTitle" placeholder="消息标题" style="margin-top: 15px"></el-input>
                    </el-form-item>
                    <el-form-item label="发布人员">
                        <el-input v-model="formInline.name" placeholder="发布人员" style="margin-top: 15px"></el-input></el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" style="margin-top: 15px">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
    <div id="dataTable">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 15px">数据列表</span>

                <el-button  @click="dialogFormVisible = true" style="float: right; padding: 3px 0" type="primary" plain >发布消息</el-button>
                <!--<el-button style="float: right; padding: 3px 0;margin-right: 10px" type="primary" plain>操作按钮</el-button>
                <el-button style="float: right; padding: 3px 0" type="primary" plain>操作按钮</el-button>-->
            </div>
            <template >
                <!--  给表格绑定数据，tableData即为后端传过来的数据  -->
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <!--  用porp给这一列绑定 tableData中对应的属性 z，type=selection表示这一列是复选框 -->
                    <el-table-column
                            prop="id"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <!--  label="编号"表示这一列的表头是“编号”,width代表这一列宽度 -->
                    <el-table-column
                            prop="msgTitle"
                            label="消息标题"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="发布时间"
                            width="250"
                            type="date"
                            value-format='yyyy-MM-dd'>
                    </el-table-column>


                    <el-table-column
                            prop="staffBean.name"
                            label="发布人"
                            width="180"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="sendNums"
                            label="发送条数"
                            width="250">
                    </el-table-column>
                   <!-- <el-table-column
                            label="是否启用"
                            width="100">
                        <template scope="scope">
                            <el-switch
                                    on-text ="是"
                                    off-text = "否"
                                    on-color="#5B7BFA"
                                    off-color="#dadde5"
                                    v-model="scope.row.status"
                                    @change=change(scope.$index,scope.row)>
                            </el-switch>
                        </template>
                    </el-table-column>-->
                    <el-table-column
                            label="操作">
                        <template scope="scope">
                        <el-button style="float:left; padding: 3px 0" type="text"
                                   @click=show(scope.row)>查看</el-button>
                        <div>

                        <el-dialog title="邮件消息查看" :visible.sync="dialogFormVisible2">
                            <el-form :model="form2">
                                <el-form-item label="消息标题" :label-width="formLabelWidth">
                                    <el-input v-model="form2.title" readonly="true"></el-input>
                                    <!--<el-label v-model="form.title" ></el-label>-->
                                    <!--<span>{{scope.row.sysMsgTitle}}</span>-->

                                </el-form-item>
                                <el-form-item label="消息内容" :label-width="formLabelWidth">
                                    <el-input v-model="form2.content" readonly="true"></el-input>
                                    <!--<el-label v-model="form.content" ></el-label>-->
                                    <!--<span>{{scope.row.sysMsgContent}}</span>-->

                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <!--<el-button @click="add()">发 送</el-button>-->
                                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                                <!-- <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button> -->
                            </div>
                        </el-dialog>

                        </div>
                        <!--<el-button style="float: left; padding: 3px 0" type="text"
                                   @change=qa_update()>编辑</el-button>-->
                        <el-button style="float: left; padding: 3px 0" type="text"
                                   @click=del(scope.row)>删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </template>
            <template>
                <div class="block">
                    <!-- size-change绑定的是每页显示数量变化时执行的方法，
                     current-change绑定的是翻页时执行的方法，
                     page-sizes属性中的数组是 “每页显示多少条” 下拉框中的数据，
                     page-size属性时当前显示条数，
                     layout是翻页控件的布局顺序，
                     total绑定的是总共多少条数据-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>
        </el-card>
    </div>


    <!-- Form -->
  <!--  <el-button type="text" @click="dialogFormVisible = true">
        <div id="app1">
            <el-row>
                <el-button size="small">发送邮件</el-button>
            </el-row>
        </div>
    </el-button>-->

    <!--<el-dialog title="邮件消息发送" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="消息标题" :label-width="formLabelWidth">
                <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="消息内容" :label-width="formLabelWidth">
                <el-input v-model="form.content" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="add()">发 送</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            &lt;!&ndash; <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button> &ndash;&gt;
        </div>
    </el-dialog>-->
</div>
<script type="text/javascript" th:inline="javascript">

    let app = new Vue({
        el:'#main',
        data:{
            //表格数据
            tableData:[],
            //总条数
            pageSize:10,
            //当前页
            currentPage:1,
            total:0,
            dialogFormVisible: false,
            dialogFormVisible2: false,
            // total:'',
            rows:[],
            form: {
                title: '',
                content:''
            },
            formInline: {
                stationMsgTitle: '',
                name: ''
            },
            formLabelWidth: '120px',
            form2:{
                title: '',
                content:''}
        },

        methods:{
            //向后端发起请求，加载表格内容，传的参数是当前查第几页
            getData(val){
                axios.get([[@{emailmessage/page}]],{
                    params:{
                        //每页多少条
                        limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:val,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                        //要传属性的继续写在下面

                    }
                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    this.total = res.data.total;
                    this.tableData = res.data.rows;
                    for(let i = 0 ;i<this.tableData.length;i++){
                        if(this.tableData[i].status === 0){
                            this.tableData[i].status = true;
                        }
                    }
                }).catch(error => {
                    console.log(error);
                })
            },
            show(row){
                this.form2.title = row.msgTitle;
                this.form2.content = row.msgContent;
                this.dialogFormVisible2 = true;
               // alert(this.form.title);
                //alert(this.form.content);
            },
            //改变每页显示数据条数时执行的方法
            handleSizeChange(val){
                this.pageSize=val;
                this.currentPage=1;
                this.getData(this.currentPage);
            },
            //翻页时执行的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.getData(this.currentPage);
            },
            change:function(index,row){
                console.log(index,row);
            },
            //表单提交
            onSubmit() {
                axios.get([[@{emailmessage/page}]],{
                    params:{
                        //每页多少条
                        limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:1,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                            msgTitle:this.formInline.msgTitle,
                            name:this.formInline.name
                    }
                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    this.total = res.data.total;
                    this.tableData = res.data.rows;
                    for(let i = 0 ;i<this.tableData.length;i++){
                        if(this.tableData[i].status === 0){
                            this.tableData[i].status = true;
                        }
                    }
                }).catch(error => {
                    console.log(error);
                })
            },
            del:function(row){

                axios.put([[@{emailmessage/del/}]]+row.id,{

                }).then(res => {

                    //将查询到的数据赋给表格中绑定的变量
                    this.getData(1);
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }).catch(error => {
                    console.log(error);
                })
                console.log(row.id,row.status);
            },
                add(){
                    // 改为添加新系统消息进数据库
                    axios.get([[@{mail/send1}]],{
                        params:{
                            // limit:10,
                            // pageNum:1,
                            // sort:"create_time",
                            // sortOrder:"desc",
                            // name:this.form.name,
                           // region:this.form.content
                        }
                    })
                .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                        console.log(res);
                        if(res.data.code==200){
                            alert("发送成功~")
                        }
                        // this.total = res.data.total;
                        // this.rows = res.data.rows;
                    })
                        .catch(error => {
                            console.log(error);
                        });

                },


        },
        //创建时执行查询，查第一页
        created : function () {
            this.getData(1);
        }
    })
    let app3 = new Vue({
        el:"#top"
    })

    //new Ctor().$mount('#app')
    //new Vue().$mount('#app')
</script>
</body>
</html>